<!-- src/views/CampusWall.vue -->
<template>
  <div class="campus-wall">
    <!-- 顶部导航标签 -->
    <el-tabs v-model="activeTab" class="wall-tabs">
      <el-tab-pane label="发现" name="discover"></el-tab-pane>
      <el-tab-pane label="消息" name="messages"></el-tab-pane>
      <el-tab-pane label="通知" name="notifications"></el-tab-pane>
      <el-tab-pane label="发布" name="post"></el-tab-pane>
    </el-tabs>

    <!-- 发布按钮 -->
    <div class="post-button">
      <el-button type="primary" circle>
        <el-icon><Plus /></el-icon>
      </el-button>
    </div>

    <!-- 内容分类 -->
    <div class="category-scroll">
      <el-scrollbar>
        <el-tag
          v-for="category in categories"
          :key="category"
          size="large"
          class="category-tag"
          effect="plain"
        >
          {{ category }}
        </el-tag>
      </el-scrollbar>
    </div>

    <!-- 热门话题 -->
    <div class="hot-topics">
      <h3>热门话题</h3>
      <el-tag
        v-for="topic in hotTopics"
        :key="topic"
        class="topic-tag"
        type="warning"
        effect="dark"
        round
      >
        {{ topic }}
      </el-tag>
    </div>

    <!-- 在线好友 -->
    <div class="online-friends">
      <h3>在线好友</h3>
      <div class="friend-list">
        <div class="friend-item" v-for="friend in friends" :key="friend.name">
          <el-avatar :size="40" :src="friend.avatar" />
          <span class="friend-name">{{ friend.name }}</span>
        </div>
      </div>
    </div>

    <!-- 校园活动 -->
    <div class="campus-activities">
      <h3>校园活动</h3>
      <div class="activity-card" v-for="act in activities" :key="act.title">
        <h4>{{ act.title }}</h4>
        <p><el-icon><Calendar /></el-icon> {{ act.time }}</p>
        <p><el-icon><Location /></el-icon> {{ act.location }}</p>
      </div>
    </div>

    <!-- 最新动态 -->
    <div class="latest-posts">
      <h3>最新动态</h3>
      <div class="post-item" v-for="post in posts" :key="post.id">
        <div class="post-header">
          <span class="poster">{{ post.user }}</span>
          <span class="time-location">{{ post.time }} · {{ post.location }}</span>
        </div>
        <div class="post-content">
          {{ post.content }}
        </div>
        <div class="post-tags">
          <el-tag
            v-for="tag in post.tags"
            :key="tag"
            size="small"
            type="info"
            effect="light"
          >
            {{ tag }}
          </el-tag>
        </div>
        <div class="post-stats">
          {{ post.views }}次浏览 · {{ post.comments }}条评论 · {{ post.shares }}次分享
        </div>
        <div class="post-actions">
          <el-button size="small" icon="el-icon-thumb-up">点赞</el-button>
          <el-button size="small" icon="el-icon-comment">评论</el-button>
          <el-button size="small" icon="el-icon-share">分享</el-button>
          <el-button size="small" icon="el-icon-star-on">收藏</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
share
<script setup>
import { ref } from 'vue'
import { Plus, Calendar, Location } from '@element-plus/icons-vue'

const activeTab = ref('discover')

const categories = [
  '寻人启事', '失物招领', '咨询求助', '活动宣传',
  '课程交流', '美食分享', '学习资料', '运动健身'
]

const hotTopics = ['#校园美食节', '#期末复习组队', '#运动会征集', '#选修课推荐', '#考研交流']

const friends = [
  { name: '王五', avatar: '' },
  { name: '赵六', avatar: '' },
  { name: '钱七', avatar: '' },
  { name: '孙八', avatar: '' }
]

const activities = [
  { title: '校园歌唱比赛', time: '下周五 19:00', location: '学生活动中心' },
  { title: '编程马拉松', time: '本月25-26日', location: '计算机学院楼' }
]

const posts = [
  {
    id: 1,
    user: '张三',
    time: '2小时前',
    location: '图书馆',
    content: '在图书馆三楼阅览室捡到一个黑色钱包，内有学生证和少量现金。失主请私信我核对信息领取！',
    tags: ['失物招领', '图书馆', '黑色钱包'],
    views: 245,
    comments: 15,
    shares: 8
  },
  {
    id: 2,
    user: '李四',
    time: '5小时前',
    location: '教学楼A区',
    content: '下周要举办校园编程大赛了，有没有同学想组队参加的？我会前端开发，希望找后端和设计的同学一起组队！',
    tags: ['活动宣传', '组队', '编程大赛'],
    views: 512,
    comments: 32,
    shares: 21
  },
  {
    id: 3,
    user: '陈同学',
    time: '昨天',
    location: '食堂二楼',
    content: '食堂二楼新开的麻辣香锅真的绝了！强烈推荐给大家，特别是他们的特调酱料，味道超级棒！而且现在还有8折优惠，截止到本周末～',
    tags: ['美食分享', '食堂二楼', '麻辣香锅', '优惠活动'],
    views: 842,
    comments: 46,
    shares: 29
  }
]
</script>

<style scoped>
.campus-wall {
  padding: 16px;
  background-color: #f5f6fa;
  font-family: Arial, sans-serif;
}

.wall-tabs {
  margin-bottom: 16px;
}

.post-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
}

.category-scroll {
  margin: 16px 0;
}
.category-tag {
  margin-right: 10px;
}

.hot-topics,
.online-friends,
.campus-activities,
.latest-posts {
  margin-bottom: 24px;
  background: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.topic-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.friend-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 0;
}
.friend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}
.friend-name {
  font-size: 12px;
  margin-top: 4px;
  color: #666;
}

.activity-card {
  border-left: 4px solid #409eff;
  padding-left: 12px;
  margin-bottom: 12px;
}

.post-item {
  background: #fafafa;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #eee;
}
.post-header {
  display: flex;
  justify-content: space-between;
  color: #333;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}
.time-location {
  color: #999;
  font-size: 12px;
}
.post-content {
  font-size: 15px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 8px;
}
.post-tags {
  margin-bottom: 8px;
}
.post-stats {
  font-size: 12px;
  color: #999;
  margin: 8px 0;
}
.post-actions {
  display: flex;
  gap: 10px;
  font-size: 12px;
}
</style>